<template>
    <div class="mask-index">
        <div class="item1" v-show="step.one">
            <el-popconfirm
                ref="popOne"
                title="开标待办事宜在这里设置"
                confirm-button-text='下一步'
                cancel-button-text=' '
                hide-icon
                @confirm="stepClick('two')"
                placement="left"
                >
                <div ref="one" class="one" slot="reference"></div>
            </el-popconfirm>
        </div>
        <div class="item2" v-show="step.two">
            <el-popconfirm
                title="常用的链接地址放在这里方便查找哦！"
                confirm-button-text='下一步'
                cancel-button-text=' '
                hide-icon
                @confirm="stepClick('three')"
                placement="left"
                >
                <div ref="two" class="two" slot="reference"></div>
            </el-popconfirm>
        </div>
        <div class="item3" v-show="step.three" id="myDiv">
            <el-popconfirm
                title="可在这里搜索招投标相关内容，设置订阅信息，关注的信息都在这里哦！"
                confirm-button-text='开始使用'
                cancel-button-text=' '
                hide-icon
                @confirm="close"
                placement="top"
                >
                <div ref="three" class="three" slot="reference"></div>
            </el-popconfirm>
        </div>
    </div>
</template>

<script>


export default {
    mixins: [],
    components: {
        
    },
    props: {
        
    },
    data() {
        return {
            step:{
                one:true,
                two:false,
                three:false
            },
        };
    },
    computed: {
        // oneVisible(){
        //     return this.$refs.popOne.visible;
        // }
    },
    watch: {
        // 'oneVisible': {
        //     handler(n, o) {
        //         console.log(n);
        //     }
        // }
    },
    methods: {
        /**
         * 步骤点击
         * @param {keyName} 下一级的ref、所绑定值的key
         */
        stepClick(keyName){

            if(keyName == 'three' ){
                const fastEntrance = document.querySelector('.fast-entrance')
                fastEntrance.scrollIntoView({
                    behavior:'smooth'
                })
            }

            const that = this;
            Object.keys(that.step).forEach(key => {
                that.step[key] = false;
            })
           that.step[keyName] = true;
           this.$refs[keyName].click();
        },
        close(){
            this.$emit('close')
        }

    },
    mounted() {
        this.$refs.one.click();
    },
}
</script>

<style lang="scss" scoped>
    .mask-index{
        width: 100%;
        height: 100%;
        position: relative;
        
        .item1 {
            position: absolute;
            top:225px;
            right: 0px;
            width: 351px;
            height: 175px;
            border-radius: 5px;
            background-color: white; 

            div {
                width: 100%;
                height: 100%;
            }
        }

        .item2 {
            position: absolute;
            top:484px;
            right:0px;
            width: 351px;
            height: 50px;
            border-radius: 5px;
            background-color: white; 

            div {
                width: 100%;
                height: 100%;
            }
        }

        .item3 {
            position: absolute;
            top:240px;
            right: 0px;
            width: 1208px;
            height: 390px;
            border-radius: 5px;
            background-color: white; 

            div {
                width: 100%;
                height: 100%;
            }
        }
    }
</style>